<template>
  <div class="property_container">
    <div id="main" style="width: 600px; height: 400px" ref="main"></div>
  </div>
</template>
<script setup>
import { inject, ref, onMounted } from "vue";
const echarts = inject("echarts");
const option = {
  xAxis: {
    data: ["现金红包分佣", "门店分佣", "账户余额", "已提现"],
  },
  yAxis: {},
  color: [
    "#c23531",
    "#2f4554",
    "#61a0a8",
    "#d48265",
    "#91c7ae",
    "#749f83",
    "#ca8622",
    "#bda29a",
    "#6e7074",
    "#546570",
    "#c4ccd3",
  ],
  series: [
    {
      data: [500, 200, 700, 1300],
      type: "bar",
      stack: "x",
      color: "#61a0a8",
    },
    {
      data: [50, 40, 30, 50],
      type: "bar",
      stack: "x",
      color: "#ca8622",
    },
  ],
};
const main = ref(null);
onMounted(() => {
  const useEc = echarts.init(main.value);
  useEc.setOption(option);
});
</script>
<style lang="scss" scoped>
.property_container {
  background-color: #fff;
  width: 95%;
  height: 800px;
  min-width: 1500px;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 20px;
}
</style>
